<table-submenu></table-submenu>

<div class="content-section introduction">
    <div>
        <span class="feature-title">Table - <span class="subitem">CRUD</span></span>
        <span>This samples demonstrates a CRUD implementation using various PrimeNG components.</span>
    </div>
</div>

<div class="content-section implementation">
    <p-table [columns]="cols" [value]="cars" selectionMode="single" [(selection)]="selectedCar" (onRowSelect)="onRowSelect($event)" [paginator]="true" [rows]="10">
        <ng-template pTemplate="caption">
            List of Cars
        </ng-template>
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th *ngFor="let col of columns" [pSortableColumn]="col.field">
                    {{col.header}}
                    <p-sortIcon [field]="col.field"></p-sortIcon>
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-columns="columns">
            <tr [pSelectableRow]="rowData">
                <td *ngFor="let col of columns">
                    {{rowData[col.field]}}
                </td>
            </tr>
        </ng-template>
        <ng-template pTemplate="summary" let-rowData>
            <div style="text-align:left">
                <button type="button" pButton icon="fa fa-plus" (click)="showDialogToAdd()" label="Add"></button>
            </div>
        </ng-template>
    </p-table>
    
    <p-dialog header="Car Details" [(visible)]="displayDialog" [responsive]="true" showEffect="fade" [modal]="true" [style]="{width: '300px'}">
        <div class="ui-g ui-fluid" *ngIf="car">
            <div class="ui-g-12">
                <div class="ui-g-4">
                    <label for="vin">Vin</label>
                </div>
                <div class="ui-g-8">
                    <input pInputText id="vin" [(ngModel)]="car.vin" />
                </div>
            </div>
            <div class="ui-g-12">
                <div class="ui-g-4">
                    <label for="year">Year</label>
                </div>
                <div class="ui-g-8">
                    <input pInputText id="year" [(ngModel)]="car.year" />
                </div>
            </div>
            <div class="ui-g-12">
                <div class="ui-g-4">
                    <label for="brand">Brand</label>
                </div>
                <div class="ui-g-8">
                    <input pInputText id="brand" [(ngModel)]="car.brand" />
                </div>
            </div>
            <div class="ui-g-12">
                <div class="ui-g-4">
                    <label for="color">Color</label>
                </div>
                <div class="ui-g-8">
                    <input pInputText id="color" [(ngModel)]="car.color" />
                </div>
            </div>
        </div>
        <p-footer>
            <div class="ui-dialog-buttonpane ui-helper-clearfix">
                <button type="button" pButton icon="fa fa-close" (click)="delete()" label="Delete"></button>
                <button type="button" pButton icon="fa fa-check" (click)="save()" label="Save"></button>
            </div>
        </p-footer>
    </p-dialog>
</div>

<div class="content-section documentation">
    <p-tabView effect="fade">
        <p-tabPanel header="tablecruddemo.ts">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/table/tablepagedemo.ts" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-typescript" pCode ngNonBindable>
export class TableCrudDemo implements OnInit &#123;

    displayDialog: boolean;

    car: Car = &#123;&#125;;

    selectedCar: Car;

    newCar: boolean;

    cars: Car[];

    cols: any[];

    constructor(private carService: CarService) &#123; &#125;

    ngOnInit() &#123;
        this.carService.getCarsSmall().then(cars => this.cars = cars);

        this.cols = [
            &#123; field: 'vin', header: 'Vin' &#125;,
            &#123; field: 'year', header: 'Year' &#125;,
            &#123; field: 'brand', header: 'Brand' &#125;,
            &#123; field: 'color', header: 'Color' &#125;
        ];
    &#125;

    showDialogToAdd() &#123;
        this.newCar = true;
        this.car = &#123;&#125;;
        this.displayDialog = true;
    &#125;

    save() &#123;
        let cars = [...this.cars];
        if (this.newCar)
            cars.push(this.car);
        else
            cars[this.cars.indexOf(this.selectedCar)] = this.car;

        this.cars = cars;
        this.car = null;
        this.displayDialog = false;
    &#125;

    delete() &#123;
        let index = this.cars.indexOf(this.selectedCar);
        this.cars = this.cars.filter((val, i) => i != index);
        this.car = null;
        this.displayDialog = false;
    &#125;

    onRowSelect(event) &#123;
        this.newCar = false;
        this.car = this.cloneCar(event.data);
        this.displayDialog = true;
    &#125;

    cloneCar(c: Car): Car &#123;
        let car = &#123;&#125;;
        for (let prop in c) &#123;
            car[prop] = c[prop];
        &#125;
        return car;
    &#125;
&#125;
</code>
</pre>   
        </p-tabPanel>

        <p-tabPanel header="tablecruddemo.html">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/table/tablepagedemo.html" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-table [columns]="cols" [value]="cars" selectionMode="single" [(selection)]="selectedCar" (onRowSelect)="onRowSelect($event)" [paginator]="true" [rows]="15"&gt;
    &lt;ng-template pTemplate="caption"&gt;
        List of Cars
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="header" let-columns&gt;
        &lt;tr&gt;
            &lt;th *ngFor="let col of columns" [pSortableColumn]="col.field"&gt;
                &#123;&#123;col.header&#125;&#125;
                &lt;p-sortIcon [field]="col.field"&gt;&lt;/p-sortIcon&gt;
            &lt;/th&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="body" let-rowData let-columns="columns"&gt;
        &lt;tr [pSelectableRow]="rowData"&gt;
            &lt;td *ngFor="let col of columns"&gt;
                &#123;&#123;rowData[col.field]&#125;&#125;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="summary" let-rowData&gt;
        &lt;div style="text-align:left"&gt;
            &lt;button type="button" pButton icon="fa fa-plus" (click)="showDialogToAdd()" label="Add"&gt;&lt;/button&gt;
        &lt;/div&gt;
    &lt;/ng-template&gt;    
&lt;/p-table&gt;

&lt;p-dialog header="Car Details" [(visible)]="displayDialog" [responsive]="true" showEffect="fade" [modal]="true"  [style]="&#123;width: '300px'&#125;"&gt;
    &lt;div class="ui-g ui-fluid" *ngIf="car"&gt;
        &lt;div class="ui-g-12"&gt;
            &lt;div class="ui-g-4"&gt;
                &lt;label for="vin"&gt;Vin&lt;/label&gt;
            &lt;/div&gt;
            &lt;div class="ui-g-8"&gt;
                &lt;input pInputText id="vin" [(ngModel)]="car.vin" /&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="ui-g-12"&gt;
            &lt;div class="ui-g-4"&gt;
                &lt;label for="year"&gt;Year&lt;/label&gt;
            &lt;/div&gt;
            &lt;div class="ui-g-8"&gt;
                &lt;input pInputText id="year" [(ngModel)]="car.year" /&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="ui-g-12"&gt;
            &lt;div class="ui-g-4"&gt;
                &lt;label for="brand"&gt;Brand&lt;/label&gt;
            &lt;/div&gt;
            &lt;div class="ui-g-8"&gt;
                &lt;input pInputText id="brand" [(ngModel)]="car.brand" /&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="ui-g-12"&gt;
            &lt;div class="ui-g-4"&gt;
                &lt;label for="color"&gt;Color&lt;/label&gt;
            &lt;/div&gt;
            &lt;div class="ui-g-8"&gt;
                &lt;input pInputText id="color" [(ngModel)]="car.color" /&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;p-footer&gt;
        &lt;div class="ui-dialog-buttonpane ui-helper-clearfix"&gt;
            &lt;button type="button" pButton icon="fa fa-close" (click)="delete()" label="Delete"&gt;&lt;/button&gt;
            &lt;button type="button" pButton icon="fa fa-check" (click)="save()" label="Save"&gt;&lt;/button&gt;
        &lt;/div&gt;
    &lt;/p-footer&gt;
&lt;/p-dialog&gt;
</code>
</pre>
        </p-tabPanel>
    </p-tabView>
</div>